import React from 'react'
import {
    Form,
    Input,
    Row,
    Col,
    DatePicker,
    message,
    Button
} from "antd";
import assessmentList from "@/staticLists/assessmentList";
import { useDispatch } from "umi"
import { assessmentRule } from "@/utils/rules";
import DropPopover from "@/components/DropPopover"
import $http from "@/services"
export default function index({ addStaffFn }) {
    const dispatch = useDispatch();
    const [form] = Form.useForm();

    // 创建assessment
    const createAssess = async (data) => {
        console.log(data)
        // 调整状态类型
        data.standardScore = +data.standardScore;
        data.assessmentScore = +data.assessmentScore;
        delete data.currentLevelVal;
        delete data.staffNameVal;
        // 获取其id值
        data.staffName = form.getFieldValue('staffName');
        data.currentLevel = form.getFieldValue('currentLevel');
        const { code, msg } = await $http.createAssessment(data);
        if (!code) {
            message.success(msg);
            addStaffFn();
            dispatch({
                type: "common/setIsShowAdd",
                payload: false
            })
        }

    }

    //当其值修改时，判断等级
    const valueChange = () => {
        const standardScore = form.getFieldValue('standardScore');
        const assessmentScore = form.getFieldValue('assessmentScore');
        if (standardScore && assessmentScore) {
            const result = assessmentScore - standardScore;
            let levelTags = null;
            switch (result) {
                case result <= 0:
                    levelTags = 'C';
                    break;
                case result > 0 && result < 20:
                    levelTags = 'B';
                    break;
                default:
                    levelTags = 'A';
                    break;
            }
            form.setFieldsValue({ result: levelTags });
        }
    }

    //- 表单集合映射
    const groupData = {
        input: (item) => (
            <Input placeholder={item.initVal} />
        ),
        popover: (item) => {
            return (
                <Input
                    readOnly
                    className="border-color"
                    placeholder={item.initVal}
                    addonAfter={
                        <>
                            <DropPopover
                                placeValue={item.labelTxt}
                                interfaced={item.url}
                                searchType={item.type}
                                getnewValue={(obj) => {
                                    const setData = {
                                        [item.itemName]: obj[item.type],
                                        [item.itemName.split('V')[0]]: obj._id,
                                    };
                                    item.itemName === 'currentLevelVal' &&
                                        (setData.standardScore = obj.levelScore);
                                    form.setFieldsValue(setData);
                                }}
                            />
                        </>
                    }
                />
            );
        },
        date: (item) => (
            <DatePicker
                placeholder="请选择入职时间"
                style={{ width: '100%' }}
            />
        ),
    };
    return (
        <Form
            layout='vertical'
            form={form}
            onFieldsChange={valueChange}
            onFinish={createAssess}
        >
            {assessmentList.map((el, index) => {
                return (<Row justify={"space-between"} key={index}>
                    {el.map((item, childIndex) => {
                        return (<Col span={11} key={childIndex}>
                            <Form.Item
                                label={item.labelTxt}
                                name={item.itemName}
                                rules={assessmentRule[item.itemName]}
                            >
                                {item.renderType == "inputNumber" ? groupData['input'](item) : groupData[item.renderType](item)}
                            </Form.Item>
                        </Col>)
                    })}
                </Row>)
            })}
            <Row justify={"end"}>
                <Col>
                    <Button type='primary' htmlType='submit'>创建</Button>
                </Col>
            </Row>
        </Form>

    )
}
